import React from 'react';
import { Text, Stack, Checkbox, Button } from '@fluentui/react-components';

const NotificationsPage: React.FC = () => {
  return (
    <Stack tokens={{ childrenGap: '10px' }}>
      <Text variant="largeTitle">通知中心</Text>
      <Checkbox label="显示未读通知" />
      <Checkbox label="显示已读通知" />
      <Button appearance="primary">全部标记为已读</Button>
      <Stack tokens={{ childrenGap: '5px' }}>
        <Text variant="body1" style={{ marginBottom: '5px' }}>通知1: 商机A的更新</Text>
        <Text variant="body1" style={{ marginBottom: '5px' }}>通知2: 商机B的状态变化</Text>
        <Text variant="body1" style={{ marginBottom: '5px' }}>通知3: 商机C的风险提示</Text>
      </Stack>
    </Stack>
  );
};

export default NotificationsPage;
